<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           /* li {
            color: red;
          } */
          /* ol li {
            color: green;
          } */
          /* a {
            color: powderblue;
            font-size: 20px;
          } */
          /* ul .first {
            color: orange;
          } */
          /* ol li a {
            color: brown;
          }  */
          #div1 {
            /* color: green; */
            font-size: 50px;
            width: 500px;
            height:200px;
            border-width: 1px 5px 10px 15px;
            border-style: solid;
            border-color: red green blue yellow;
            /* 使得div变得不独占一行，也会使得width和height失效 */
            /* display: inline; */
            border-bottom-width: 20px;
            border-top-width: 20px;
            border-left-width: 30px;
            border: solid plum 1px;
            display: inline;




          }

    </style>
</head>
<body>
    <div id="div1" class="font40">我是一个div1</div>
    <div id="div2" class="font40">我是一个div2</div>
    <div id="div4">我是一个div</div>
    <div id="div5">我是一个div</div>
    <!-- ul是无序列表 -->
    <ul>
        <li class="first">第一个</li>
        <li>第二个 </li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>
    <ol><li>有序第一个1</li>
    <li>有序第三个 </li>
    <li>有序第四个</li></ol>
    
</body>
</html>